<template>
  <el-col class="info-wrapper" :span="23">
    <el-form
      ref="form"
      :model="searchParams"
      class="search-from main-content"
      label-width="120px"
    >
      <el-col class="search-col">
        <el-form-item label="委托人" prop="client">
          <el-input v-model="searchParams.client"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" prop="contractId">
          <el-input v-model="searchParams.contractId"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-select
            v-model="searchParams.province"
            placeholder="请选择"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="审批开始" prop="approveStartTime">
          <el-date-picker
            v-model="searchParams.approveStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="approveEndTime">
          <el-date-picker
            v-model="searchParams.approveEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检查类型" prop="checkType">
          <el-select
            v-model="searchParams.checkType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in checkTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="审核开始" prop="examineStartTime">
          <el-date-picker
            v-model="searchParams.examineStartTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" prop="examineEndTime">
          <el-date-picker
            v-model="searchParams.examineEndTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="分公司" prop="branchCompany">
          <el-select
            v-model="searchParams.branchCompany"
            placeholder="请选择"
          >
            <el-option
              v-for="item in branchCompanyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col class="search-col">
        <el-form-item label="评定老师" prop="assessingTeacher">
          <el-select
            v-model="searchParams.assessingTeacher"
            placeholder="请选择"
          >
            <el-option
              v-for="item in assessingTeacherList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工厂编号" prop="companyId">
          <el-input v-model="searchParams.companyId"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="search-col operation-area">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">清空</el-button>
        <el-button @click="batchExport">批量导出</el-button>
      </el-col>
    </el-form>

    <el-tabs class="table-tabs" type="border-card">
      <el-tab-pane>
        <span slot="label">未评定 {{ unscheduledTableData.length }}</span>
        <el-button type="primary" style="margin-bottom: 20px;">批量审定</el-button>
        <el-table border :data="unscheduledTableData">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="合同编号"> </el-table-column>
          <el-table-column prop="date" label="是否检查"> </el-table-column>
          <el-table-column prop="date" label="是否检测"> </el-table-column>
          <el-table-column prop="date" label="检验状态"> </el-table-column>
          <el-table-column prop="date" label="委托人"> </el-table-column>
          <el-table-column prop="date" label="生产者"> </el-table-column>
          <el-table-column prop="date" label="生产企业"> </el-table-column>
          <el-table-column prop="date" label="产品小类"> </el-table-column>
          <el-table-column prop="date" label="产品名称"> </el-table-column>
          <el-table-column prop="date" label="组长"> </el-table-column>
          <el-table-column prop="date" label="检查类型"> </el-table-column>
          <el-table-column prop="date" label="评定人员"> </el-table-column>
          <el-table-column prop="date" label="总经理审批"> </el-table-column>
          <el-table-column prop="date" label="实际开始"> </el-table-column>
          <el-table-column prop="date" label="实际结束"> </el-table-column>
          <el-table-column prop="date" label="财务收费"> </el-table-column>
          <el-table-column prop="date" label="分公司"> </el-table-column>
          <el-table-column prop="operation" label="操作">
            <el-link type="primary" @click="toDetail">审定</el-link>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">待整改 {{ scheduledTableData.length }}</span>
        <el-table border :data="scheduledTableData">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="date" label="合同编号"> </el-table-column>
          <el-table-column prop="date" label="是否检查"> </el-table-column>
          <el-table-column prop="date" label="是否检测"> </el-table-column>
          <el-table-column prop="date" label="检验状态"> </el-table-column>
          <el-table-column prop="date" label="委托人"> </el-table-column>
          <el-table-column prop="date" label="生产者"> </el-table-column>
          <el-table-column prop="date" label="生产企业"> </el-table-column>
          <el-table-column prop="date" label="产品小类"> </el-table-column>
          <el-table-column prop="date" label="产品名称"> </el-table-column>
          <el-table-column prop="date" label="组长"> </el-table-column>
          <el-table-column prop="date" label="检查类型"> </el-table-column>
          <el-table-column prop="date" label="评定人员"> </el-table-column>
          <el-table-column prop="date" label="总经理审批"> </el-table-column>
          <el-table-column prop="date" label="实际开始"> </el-table-column>
          <el-table-column prop="date" label="实际结束"> </el-table-column>
          <el-table-column prop="date" label="财务收费"> </el-table-column>
          <el-table-column prop="date" label="分公司"> </el-table-column>
          <el-table-column prop="operation" label="操作">
            <el-link type="primary" @click="toDetail">审定</el-link>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: "assessManage",
  data() {
    return {
      defulatParams: {
        client: "", // 委托人
        contractId: "", // 合同编号
        companyId: "", // 工厂编号
        province: "", // 省份
        assessingTeacher: "", // 评定老师
        checkType: "", // 检查类型
        approveStartTime: "", // 审批开始
        approveEndTime: "", // 至（审批开始）
        examineStartTime: "", // 审核开始
        examineEndTime: "", // 至（审核开始）
        branchCompany: "" // 分公司
      },
      searchParams: {
        ...this.defulatParams,
      },
      unscheduledTableData: [{ date: 123 }], // 未安排表格数据
      scheduledTableData: [{ date: 123 }], // 已安排表格数据
      provinceList: [], // 省份列表数据
      checkTypeList: [], // 检查类型列表数据
      assessingTeacherList: [], //评定老师列表数据
      branchCompanyList: [], //分公司列表数据
    };
  },
  mounted() {
    this.queryTableData();
  },
  methods: {
    search() {
      // todo: 搜索方法
    },
    reset() {
      this.searchParams = {
        ...this.defulatParams
      };
      this.search();
    },
    batchExport() {
      // todo: 批量导出方法
    },
    queryTableData() {
      // todo：获取表格数据
    },
    toDetail(row) {
      this.$router.push({
        path: "/product/assessManage/review/detail",
        query: row
      });
    }
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .search-from {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #c2d9e6;
    padding-top: 20px;

    .search-col {
      display: flex;
    }

    .operation-area {
      margin-left: 20px;
      margin-bottom: 10px;
    }
  }

  .table-tabs {
    margin-top: 15px;
  }

  .operation-col {
    white-space: 5px;
  }
}
</style>
